<?php 
	$this -> load -> view('header'); ?>
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
	<?php //$this -> load -> view('sidebar'); ?>
	<!-- BEGIN PAGE -->
	<div class="page-content">
		<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<div id="portlet-config" class="modal hide">
			<div class="modal-header">
				<button data-dismiss="modal" class="close" type="button"></button>
				<h3>portlet Settings</h3>
			</div>
			<div class="modal-body">
				<p>
					Here will be a configuration form
				</p>
			</div>
		</div>
		<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<!-- BEGIN PAGE CONTAINER-->
		<div class="container-fluid">
			<!-- BEGIN PAGE HEADER-->
			<div class="row-fluid">
				<div class="span12">
					<h3 class="page-title"> Daftar Laporan</h3>
					<?php $this -> load -> view('breadcrumb'); ?>
				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
			<div class="row-fluid">
				<div class="span12">
					<form action="<?php echo base_url()?>inbox/save" method="post" id="editReportFrm" class="form-horizontal" enctype="multipart/form-data">
					<div class="tabbable tabbable-custom boxless">
						<ul class="nav nav-tabs">
							<li class="active">
								<a class="advance_form_with_chosen_element" href="#tab_1" data-toggle="tab">Informasi Laporan</a>
							</li>
							<li >
								<a class="advance_form_with_chosen_element" href="#table" data-toggle="tab">Data Peserta</a>
							</li>					
							<li >
								<a class="advance_form_with_chosen_element" href="#attachmentTab" data-toggle="tab">Dokumen Pendukung</a>
							</li>	
							<?php if ($berkasComments!=NULL && count($berkasComments)) {?>
							<li >
								<a class="advance_form_with_chosen_felement" href="#chatTab" data-toggle="tab">Catatan/Komentar</a>
							</li>						
							<?php } ?>	
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="tab_1">
								<div class="portlet box green">
									<div class="portlet-title">
										<h4><i class="icon-reorder"></i>Formulir Laporan</h4>
										<div class="tools">
											<a href="javascript:;" class="collapse"></a>
											<a href="#portlet-config" data-toggle="modal" class="config"></a>
											<a href="javascript:;" class="reload"></a>
											<a href="javascript:;" class="remove"></a>
										</div>
									</div>
									<div class="portlet-body form">
										<!-- BEGIN FORM-->
										
											<input type="hidden" name="Berkas.id" value="<?php echo $id?>"/>
											<input type="hidden" name="Profile.id" value="<?php echo $selectedProfile?>"/>
											<input type="hidden" name="BerkasComment.text" id="berkasNote" value=""/>
											<h3 class="form-section">Informasi Laporan</h3>
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Kab/Kota</label>
														<div class="controls">
															<select class="span8 chosen" data-placeholder="Choose a Distrik" name="Berkas.distrik" id="distrik">
																<?php
																	$isSelected = '';
																	echo "<option value='-1' >--Pilih Kab/Kota--</option>";
																	foreach ($distrikList as $row){
																		if ($berkas != NULL){
																			if ($berkas->getPerpustakaan()->getDesa()->getDistrik()->getId()==$row->getId()){
																				$isSelected = "selected='selected'";
																			} else {
																				$isSelected = "";
																			}
																		}
																		echo "<option value='{$row->getId()}' {$isSelected}>{$row->getNama()}</option>";
																	}
																?>																
															</select>
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Jenis Laporan</label>
														<div class="controls">
															<select class="large m-wrap span6" name="Berkas.tipe" id="tipeBerkas">
																	<option value='-1'>--Pilih Jenis Laporan--</option>
																<?php
																	$isSelected = '';
																	foreach ($tipeBerkasList as $row){
																		if ($berkas != NULL){
																			if ($berkas->getTipe()->getId()==$row->getId()){
																				$isSelected = "selected='selected'";
																			} else {
																				$isSelected = "";
																			}
																		}
																		echo "<option value='{$row->getId()}' {$isSelected}>{$row->getNama()}</option>";
																	}
																?>																
															</select>
															<!--<span class="help-block">This is inline help</span>-->
														</div>
													</div>
												</div>
											</div>
											
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Desa</label>
														<div class="controls">
															<select class="span8 chosen" data-placeholder="Choose a Distrik" name="Desa.id" id="desa">
																<?php
																	$isSelected = '';
																	echo "<option value='-1' >--Pilih Desa--</option>";
																	foreach ($desaList as $row){
																		if ($berkas != NULL){
																			if ($berkas->getPerpustakaan()->getDesa()->getId()==$row->getId()){
																				$isSelected = "selected='selected'";
																			} else {
																				$isSelected = "";
																			}
																		}
																		echo "<option value='{$row->getId()}' {$isSelected}>{$row->getNama()}</option>";
																	}
																?>																
															</select>
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<div class="control-group" style="display: none" id="jenisTrainingGroup">
														<label class="control-label">Rincian Laporan</label>
														<div class="controls">
															<select class="large m-wrap span6" name="BerkasTraining.jenisTraining">
																<option value='-1'>--Silahkan Pilih--</option>
															<?php
																	$isSelected = '';
																	//$quarterYears = getFiscalYear();
																	foreach ($jenisTrainingList as $row){
																		if ($berkasTraining != NULL){
																			if ($berkasTraining->getJenisTraining()==$row){
																				$isSelected = "selected='selected'";
																			} else {
																				$isSelected = "";
																			}
																		}
																		echo "<option value='{$row->getId()}' {$isSelected}>{$row->getNama()}</option>";
																	}
																?>
															</select>	
														</div>
													</div>
												</div>
											</div>
											
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Nama Perpustakaan</label>
														<div class="controls">
															<select class="large m-wrap chosen" name="Berkas.perpustakaan" data-placeholder="Choose a Library" tabindex="1" id="perpus">
																<?php
																	$isSelected = '';
																	echo "<option value='-1' >--Pilih Perpustakaan--</option>";
																	foreach ($perpusList as $row){
																		if ($berkas != NULL){
																			if ($berkas->getPerpustakaan()->getId()==$row->getId()){
																				$isSelected = "selected='selected'";
																			} else {
																				$isSelected = "";
																			}
																		}
																		echo "<option value='{$row->getId()}' {$isSelected}>{$row->getNama()}</option>";
																	}
																?>																
															</select>
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<!-- KOSONG -->
												</div>
											</div>
											
											<div class="row-fluid" id="eventDateSection">
												<div class="span5 ">
													<div class="control-group">
														<label class="control-label">Event Date</label>
														<div class="controls">
															<div class="input-append">
                                    							<input name="Berkas.eventDate" class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="<?php echo ($berkas!=NULL && $berkas->getEventDate() != NULL)? $berkas->getEventDate()->format('d-m-Y'):""; ?>"/>
                                    							<span class="add-on"><i class="icon-calendar"></i></span>
                                 							</div>															
														</div>
													</div>
												</div>
												
												<div class="span7 ">
													<!-- KOSONG -->													
													
												</div>
											</div>
											
											<!--<div class="row-fluid">
											  	<div class="span12">
											  		
											  	</div>
											</div> -->
											
											<div class="row-fluid">
											  	<div class="span12">
											  		<div class="control-group">
						                              <label class="control-label">Description</label>
						                              <div class="controls">
						                                 <textarea class="span12 wysihtml5 m-wrap" rows="6" name="Berkas.description"><?php echo ($berkas!=NULL)? $berkas->getDescription():""; ?></textarea>
						                              </div>
						                           </div>
											  	</div>
											</div>

											<!--/row-->
										<div id="detailSection" style="display: none">	
											<h3 class="form-section">Summary</h3>
											<div class="row-fluid">
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Tanggal Mulai Training</label>
														<div class="controls">
															<div class="input-append">
                                    							<input name="BerkasTraining.fromDate" class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="<?php echo ($berkasTraining!=NULL && $berkasTraining->getFromDate() != NULL)? $berkasTraining->getFromDate()->format('d-m-Y'):""; ?>"/>
                                    							<span class="add-on"><i class="icon-calendar"></i></span>
                                 							</div>															
														</div>
													</div>
												</div>
												
												<div class="span6 ">
													<div class="control-group">
														<label class="control-label">Tanggal Selesai Training</label>
														<div class="controls">
															<div class="input-append">
                                    							<input name="BerkasTraining.toDate" class="m-wrap m-ctrl-medium date-picker" size="16" type="text" value="<?php echo ($berkasTraining!=NULL && $berkasTraining->getToDate() != NULL)? $berkasTraining->getToDate()->format('d-m-Y'):""; ?>"/>
                                    							<span class="add-on"><i class="icon-calendar"></i></span>
                                 							</div>															
														</div>
													</div>
												</div>
											</div>
											<div class="row-fluid" id="trainingDetailGroup" >
												<div class="span6">
													<div class="control-group">
														<label class="control-label">Jumlah Staff/Non Staff</label>
														<div class="controls">
															<input type="text" class="m-wrap span3 onlynumber" readonly="true" placeholder="Staff" name="BerkasTraining.jmlStaff" id="participantTotalStaff" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlStaff():"";?>" />
															<span class="help-inline">Staff</span>
															
															<input type="text" class="m-wrap span3 onlynumber" placeholder="Non Staff" readonly="true" name="BerkasTraining.jmlNonStaff" id="participantTotalNonStaff" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlNonStaff():"";?>" />
															<span class="help-inline">Non Staff</span>																														
														</div>
													</div>													
												</div>

												<!--/span-->
												<div class="span6">
													<div class="control-group">
														<label class="control-label">Jumlah Jenis Kelamin</label>
														<div class="controls">
															<input type="text" class="m-wrap span3 onlynumber" placeholder="Pria" name="BerkasTraining.jmlPria" readonly="true" id="participantTotalMale" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlPria():"";?>" />
															<span class="help-inline">Laki-Laki</span>
															&nbsp;
															<input type="text" class="m-wrap span3 onlynumber" placeholder="Wanita" name="BerkasTraining.jmlWanita" readonly="true" id="participantTotalFemale" value="<?php echo ($berkasTraining != NULL)? $berkasTraining->getJmlWanita():"";?>" />
															<span class="help-inline">Perempuan</span>																														
														</div>
													</div>													
												</div>
												<!--/span-->
											</div>
											<!--/row-->
											
											<div class="row-fluid" id="trainingDetailGroup2">
												<div class="span6">
													<div class="control-group">
														<label class="control-label">Total</label>
														<div class="controls">
															<input type="text" class="m-wrap span3 onlynumber" placeholder="total" name="total" readonly="true" id="participantTotal" value="<?php echo ($berkasTraining != NULL)? ($berkasTraining->getJmlPria() + $berkasTraining->getJmlWanita()) : "";?>">
															&nbsp; <button class="btn blue" type="button" id="btnEditMember"><i class="icon-pencil"></i> Masukkan Data Peserta Pelatihan</button>																																													
														</div>
													</div>													
												</div>

												<!--/span-->
												<div class="span6">
													<!--<div class="control-group">
														<a href="#myModal3" role="button" class="btn btn-warning" data-toggle="modal" id="findCategory">Find</a>
													</div>-->													
												</div>
												<!--/span-->
											</div>
											<!--/row-->
										</div>
									</div>
								</div>
							</div>	
							<!-- tab table -->
							<div class="tab-pane" id="table">
								<div class="portlet box green" id="memberOfTrainingPanel" style="display: none">
									<div class="clearfix">
										<div class="btn-group">
											<button id="newParticipantBtn" class="btn green" onclick="addRow(event)">
											Tambah Peserta <i class="icon-plus"></i>
											</button>
										</div>										
									</div>
									<div class="portlet-body form">
										<!-- BEGIN FORM-->
										<div class="row-fluid">
											<div class="span12 ">
												<div class="tab-pane" id="table">
													<div class="box-content">
														<table class="table table-striped table-hover table-bordered" id="myTable" >
															<thead>
																<tr>
																	<th>Nama</th>
																	<th>Jenis Kelamin</th>
																	<th>Staff/Non Staff/Lainnya</th>
																	<th>Tindakan</th>
																</tr>
															</thead>
															<tbody>
																
																<?php
																	if ($memberOfTraining != NULL && is_array($memberOfTraining)){
																		$idx = 0;
																		foreach ($memberOfTraining as $row){
																			if ($row->getGender() == "M"){
																				$isMaleChecked = "checked";
																				$isFemaleChecked = "";
																			} else {
																				$isMaleChecked = "";
																				$isFemaleChecked = "checked";
																			}
																			
																			if ($row->getStaff() == "S"){
																				$isStaffChecked = "checked";
																				$isNonStaffChecked = "";
																			} else {
																				$isStaffChecked = "";
																				$isNonStaffChecked = "checked";
																			}
																			echo '<tr><td><input class="m-wrap large" name="participantName[]" value="'.$row->getName().'" type="text"></td><td><div class="control-group" style="margin-bottom: 5px;">'.
										                                             '<div class="controls" style="margin-left: 20px;">'.                                                
										                                                '<label class="radio">'.
										                                                '<input type="radio" name="participantGender['.$idx.']" value="M" id="gender_' .$idx.'" '.$isMaleChecked.'/>'.
										                                                'Laki-Laki &nbsp;'.
										                                                '</label>'.
										                                                '<label class="radio">'.
										                                                '<input type="radio" name="participantGender['.$idx.']" value="F" id="gender2_' .$idx.'" '.$isFemaleChecked.'/>'.
										                                                'Perempuan'.
										                                                '</label>'.  
										                                             '</div>'.
										                                          '</div></td><td><div class="control-group" style="margin-bottom: 5px;"><div class="controls" style="margin-left: 20px;">'.                                                
										                                                '<label class="radio">'.
										                                                '<input type="radio" name="participantStaff['.$idx.']" value="S" id="staff_' .$idx.'" '.$isStaffChecked.'/>'.
										                                                'Staff &nbsp;'.
										                                                '</label>'.
										                                                '<label class="radio">'.
										                                                '<input type="radio" name="participantStaff['.$idx.']" value="N" id="staff_' .$idx.'" '.$isNonStaffChecked.'/>'.
										                                                'Non Staff'.
										                                                '</label>'.  
										                                             '</div>'.
										                                          '</div></td><td><a onclick="deleteRow(event)" style="padding: 5px 12px;vertical-align: top" class="btn red"><i class="icon-remove m-icon-white"></i></a></td></tr>';
																				  $idx++;
																		}
																	} 
																?>
																<!--<tr><td><input class="m-wrap large" name="BerkasTraining.participant.name[]" value="" type="text"></td><td><label class="radio"><input value="M" name="gender[]" type="radio">Male</label>&nbsp;<label class="radio"><input value="F" name="gender[]" type="radio">Female</label></td><td><label class="radio"><input value="Staff" name="staff[]" type="radio">Staff</label>&nbsp;<label class="radio"><input value="Non" name="staff[]" type="radio">Non Staff</label></td><td><a onclick="" style="padding: 5px 12px;vertical-align: top" class="btn red"><i class="icon-remove m-icon-white"></i></a></td></tr>-->	
																	<!--<tr>
																		<td><input type="text" class="m-wrap large" name="BerkasTraining.participant.name[]" value="" /></td>
																		<td><label class="radio"><input type="radio"  value="M" name="gender[]" >Male</label>&nbsp;<label class="radio"><input type="radio" value="F" name="gender[]" />Female</label></td>
																		<td><label class="radio"><input type="radio" value="Staff" name="staff[]" >Staff</label>&nbsp;<label class="radio"><input type="radio" value="Non" name="staff[]" />Non Staff</label></td>
																		<td><a onclick="" style="padding: 5px 12px;vertical-align: top" class="btn red"><i class="icon-remove m-icon-white"></i></a></td>
																	</tr>-->															
															</tbody>
														</table>
													</div>
												</div>
											</div>													
										</div>
									</div>
								</div>
							</div>	
							<!-- end table -->
							
							<div class="tab-pane" id="attachmentTab">
								<div class="portlet">
									<div class="portlet-title line">
										<h4><i class="icon-comments"></i>Attachments</h4>										
									</div>
									<div class="portlet-body">
										<?php
											if ($berkas != NULL && $berkasAttachments != NULL){
												$i=0;
												foreach ($berkasAttachments as $berkasAttachment){
													$i++;
													echo '<div class="control-group">	
															<label class="control-label">Attachment</label>
								                              <div class="controls">
								                                 <div data-provides="fileupload" class="fileupload fileupload-exists"><input type="hidden" value="" name="">
								                                    <div class="input-append">
								                                       <div class="uneditable-input">
								                                          <i class="icon-file fileupload-exists"></i> 
								                                          <span class="fileupload-preview">'.$berkasAttachment->getPath().'</span>
								                                       </div>
								                                       <span class="btn btn-file">
								                                       <span class="fileupload-new">Select file</span>
								                                       <span class="fileupload-exists">Change</span>
								                                       <input type="file" class="default" name="attach'.$i.'" id="attach'.$i.'">
								                                       </span>
								                                       <a data-dismiss="fileupload" class="btn fileupload-exists" href="#">Remove</a>
								                                       <a class="btn blue" href="'.base_url().'inbox/viewBerkasAttachment/'.$berkasAttachment->getId().'" target="_blank">View</a>
								                                    </div>
								                                 </div>
								                              </div>
								                           </div>';
														   
												}

												$x = 5 - $i;
												for ($j=0;$j<$x;$j++){
													echo '<div class="control-group">
										                    <label class="control-label">Attachment</label>
										                        <div class="controls">
										                            <div class="fileupload fileupload-new" data-provides="fileupload">
										                            	<div class="input-append">
										                                	<div class="uneditable-input">
										                                    	<i class="icon-file fileupload-exists"></i> 
										                                        <span class="fileupload-preview"></span>
										                                    </div>
										                                <span class="btn btn-file">
										                                <span class="fileupload-new">Select file</span>
										                                <span class="fileupload-exists">Change</span>
										                                	<input type="file" name="attach'.($j+2).'" class="default" id="attach'.($j+2).'"/>
										                                </span>
										                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
										                                </div>
										                            </div>
										                         </div>
										                </div>';
												}										
											} else {
										?>
										<div class="control-group">
						                    <label class="control-label">Attachment</label>
						                        <div class="controls">
						                            <div class="fileupload fileupload-new" data-provides="fileupload">
						                            	<div class="input-append">
						                                	<div class="uneditable-input">
						                                    	<i class="icon-file fileupload-exists"></i> 
						                                        <span class="fileupload-preview"></span>
						                                    </div>
							                                <span class="btn btn-file">
							                                <span class="fileupload-new">Select file</span>
							                                <span class="fileupload-exists">Change</span>
							                                	<input type="file" name="attach1" class="default" id="attach1"/>
							                                </span>
							                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
						                                </div>
						                            </div>
						                         </div>
						                </div>
						                
						                <div class="control-group">
						                    <label class="control-label">Attachment</label>
						                        <div class="controls">
						                            <div class="fileupload fileupload-new" data-provides="fileupload">
						                            	<div class="input-append">
						                                	<div class="uneditable-input">
						                                    	<i class="icon-file fileupload-exists"></i> 
						                                        <span class="fileupload-preview"></span>
						                                    </div>
						                                <span class="btn btn-file">
						                                <span class="fileupload-new">Select file</span>
						                                <span class="fileupload-exists">Change</span>
						                                	<input type="file" name="attach2" class="default" id="attach2"/>
						                                </span>
						                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
						                                </div>
						                            </div>
						                         </div>
						                </div>
						                
						                <div class="control-group">
						                    <label class="control-label">Attachment</label>
						                        <div class="controls">
						                            <div class="fileupload fileupload-new" data-provides="fileupload">
						                            	<div class="input-append">
						                                	<div class="uneditable-input">
						                                    	<i class="icon-file fileupload-exists"></i> 
						                                        <span class="fileupload-preview"></span>
						                                    </div>
						                                <span class="btn btn-file">
						                                <span class="fileupload-new">Select file</span>
						                                <span class="fileupload-exists">Change</span>
						                                	<input type="file" name="attach3" class="default" id="attach3"/>
						                                </span>
						                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
						                                </div>
						                            </div>
						                         </div>
						                </div>
						                
						                <div class="control-group">
						                    <label class="control-label">Attachment</label>
						                        <div class="controls">
						                            <div class="fileupload fileupload-new" data-provides="fileupload">
						                            	<div class="input-append">
						                                	<div class="uneditable-input">
						                                    	<i class="icon-file fileupload-exists"></i> 
						                                        <span class="fileupload-preview"></span>
						                                    </div>
						                                <span class="btn btn-file">
						                                <span class="fileupload-new">Select file</span>
						                                <span class="fileupload-exists">Change</span>
						                                	<input type="file" name="attach4" class="default" id="attach4"/>
						                                </span>
						                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
						                                </div>
						                            </div>
						                         </div>
						                </div>
						                
						                <div class="control-group">
						                    <label class="control-label">Attachment</label>
						                        <div class="controls">
						                            <div class="fileupload fileupload-new" data-provides="fileupload">
						                            	<div class="input-append">
						                                	<div class="uneditable-input">
						                                    	<i class="icon-file fileupload-exists"></i> 
						                                        <span class="fileupload-preview"></span>
						                                    </div>
						                                <span class="btn btn-file">
						                                <span class="fileupload-new">Select file</span>
						                                <span class="fileupload-exists">Change</span>
						                                	<input type="file" name="attach5" class="default" id="attach5"/>
						                                </span>
						                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
						                                </div>
						                            </div>
						                         </div>
						                </div>	
										
										<?php
											}
										?>
									</div>
								</div>
							</div>
							<!-- END OF ATTACHMENT -->
							
							<div class="tab-pane" id="chatTab">
								<div class="portlet">
									<div class="portlet-title line">
										<h4><i class="icon-comments"></i>Comments</h4>
										<div class="tools">
											<a class="collapse" href="javascript:;"></a>
											<a class="config" data-toggle="modal" href="#portlet-config"></a>
											<a class="reload" href="javascript:;"></a>
											<a class="remove" href="javascript:;"></a>
										</div>
									</div>
								<div id="chats" class="portlet-body">
									<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 343px;">
										<div data-rail-visible1="1" data-always-visible="1" data-height="343px" class="scroller" style="overflow: hidden; width: auto; height: 343px;">
											<ul class="chats">
												<?php
													if ($berkasComments != null){
														foreach ($berkasComments as $berkasComment){
															$time = $berkasComment->getCreatedDate()->format('Y-m-d H:i:s'); 
															if ($berkasComment->getSender() == $userProfiles[0]->getUserId()){
																echo '<li class="in">
																		<div class="message">
																			<span class="arrow"></span>
																			<a class="name" href="#">'.$berkasComment->getSender().'</a>
																			<span class="datetime">at '.$time.'</span>
																			<span class="body">
																			'.$berkasComment->getText().'
																			</span>
																		</div>
																	</li>';			
															} else {
																echo '<li class="out">
																		<div class="message">
																			<span class="arrow"></span>
																			<a class="name" href="#">'.$berkasComment->getSender().'</a>
																			<span class="datetime">at '.$time.'</span>
																			<span class="body">'.$berkasComment->getText().'</span>
																		</div>
																	</li>'; 
															}
														}
													} ?>										
											</ul>
										</div>
										<div class="slimScrollBar ui-draggable" style="background: none repeat scroll 0% 0% rgb(161, 178, 189); width: 7px; position: absolute; top: 36.4667px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 187.041px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;">
										</div>
									</div>
									<!--<div class="chat-form">
										<div class="input-cont">   
											<input type="text" placeholder="Type a message here..." class="m-wrap">
											<textarea class="span12 m-wrap"></textarea>
											<textarea class="span12 wysihtml5 m-wrap" rows="6" ></textarea>
										</div>
										<div class="btn-cont"> 
											<span class="arrow"></span>
											<a class="btn blue icn-only" href="javascript:;"><i class="icon-ok icon-white"></i></a>
										</div>
									</div> -->
								</div>
							</div>
							</div>
							
								
						</div>
					</div>
					<div class="form-actions">
						<button type="submit" class="btn blue" id="saveBtn">
							<i class="icon-ok"></i> Simpan Draft
						</button>
						<button type="submit" class="btn red" id="submitBtn">
							<i class="icon-ok"></i> Kirim Laporan
						</button>
						<button type="button" class="btn" id="cancelBtn">
								Batal
						</button>
					</div>
					</form>
					<!-- END FORM-->
				</div>
			</div>
			<!-- END PAGE CONTENT-->
		</div>
		<!-- END PAGE CONTAINER -->	
	</div>
	<!-- END PAGE -->
</div>	
<!-- END CONTAINER -->	
<!-- DIALOG -->
<div id="myNote" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3 id="myModalLabel1">Add Comment</h3>		
	</div>
<div class="modal-body">
	<div class="portlet-body fuelux">
		<textarea id="note"></textarea>	
	</div>	
</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		<button class="btn yellow" id="saveNote">Save</button>
	</div>
</div>
<!-- END DIALOG -->	
<?php $this->load->view('footer')?>

<script>
	$(document).ready(function() {
		
		if ($('#tipeBerkas').val() == "TRAINING"){
			$('#jenisTrainingGroup').show();
		    $('#detailSection').show();	
		    $('#memberOfTrainingPanel').show();
		    $('#eventDateSection').hide();
		}
		
		//var idx = 0;
		<?php if ($berkas != NULL){
				 if ($memberOfTraining != NULL && count($memberOfTraining) > 0){
				 	echo "var idx = ". (count($memberOfTraining) + 1).";";
				 }	else {
				 	echo "var idx = 0;";
				 }
			  } else {
			  	 echo "var idx = 0;";
			  }
		?>
		addRow = function (event){
			event.preventDefault();
			
			var newRowHtml = '<tr><td><input class="m-wrap large" name="participantName[]" value="" type="text"></td><td><div class="control-group" style="margin-bottom: 5px;">'+
                                             '<div class="controls" style="margin-left: 20px;">'+                                                
                                                '<label class="radio">'+
                                                '<input type="radio" name="participantGender['+idx+']" value="M" id="gender_' + idx +'" checked/>'+
                                                'Laki-Laki &nbsp;'+
                                                '</label>'+
                                                '<label class="radio">'+
                                                '<input type="radio" name="participantGender['+idx+']" value="F" id="gender2_' + idx +'"/>'+
                                                'Perempuan'+
                                                '</label>'+  
                                             '</div>'+
                                          '</div></td><td><div class="control-group" style="margin-bottom: 5px;"><div class="controls" style="margin-left: 20px;">'+                                                
                                                '<label class="radio">'+
                                                '<input type="radio" name="participantStaff['+idx+']" value="S" id="staff_' + idx +'" checked/>'+
                                                'Staff &nbsp;'+
                                                '</label>'+
                                                '<label class="radio">'+
                                                '<input type="radio" name="participantStaff['+idx+']" value="N" id="staff_' + idx +'"/>'+
                                                'Non Staff'+
                                                '</label>'+  
                                             '</div>'+
                                          '</div></td><td><a onclick="deleteRow(event)" style="padding: 5px 12px;vertical-align: top" class="btn red"><i class="icon-remove m-icon-white"></i></a></td></tr>';				 
			$("#myTable > tbody").append(newRowHtml);
			idx++;			
		}		
		
		deleteRow = function (event) {
			//console.log('e.currentTarget : ' + $(event.currentTarget).attr('name'));
			$(event.currentTarget).closest('tr').remove();
 		}
		
		$('#btnEditMember').click(function(){
			var $tab = $('[data-toggle="tab"][href="#table"]');
			$tab.show();                  // Display the tab
		    $tab.tab('show'); 
		});
		
		var $mtab = $('[data-toggle="tab"][href="#tab_1"]');
		$mtab.click(function(e) {      // Binding for later use (for user interaction)
	        e.preventDefault();
	        if ($('#tipeBerkas').val()== "TRAINING"){
	        	hitungMemberOfTraining();	
	        }
	        
	        $mtab.tab('show');
	    });
	    
	    hitungMemberOfTraining = function(){
	    	console.log('hitung member of training');
	    	var jmlh = 0;
	    	var jmlhM = 0;
	    	var jmlhF= 0;
	    	var jmlhS= 0;
	    	var jmlhN= 0;
	    	$('input[name^=participantName]').each(function() {
			    console.log( this.value );
			    jmlh++;
			});
			$('input[name^=participantGender]').each(function() {
			    if ($(this).is(':checked') && $(this).val() == 'M') {
            		jmlhM++;
        		} else if ($(this).is(':checked') && $(this).val() == 'F') {
			    	jmlhF++;	
			    }
			});
			$('input[name^=participantStaff]').each(function() {
			    if ($(this).is(':checked') && $(this).val() == 'S') {
            		jmlhS++;
        		} else if ($(this).is(':checked') && $(this).val() == 'N') {
			    	jmlhN++;	
			    }
			});
			$('#participantTotal').val(jmlh);
			$('#participantTotalMale').val(jmlhM);
			$('#participantTotalFemale').val(jmlhF);
			$('#participantTotalStaff').val(jmlhS);
			$('#participantTotalNonStaff').val(jmlhN);
	    	//alert(jmlh); 
	    }
		
		$('#submitBtn').click(function(event){
			event.preventDefault();
			/* validasi */
			/*if ($('#distrik').val() == "-1"){
				alert('District cannot be null...');
				return;
			}*/
			if ($('#perpus').val() == "-1"){
				alert('Silahkan memilih perpustakaan.');
				return;
			}
			
			if ($('#perpus').val() == "-1"){
				alert('Silahkan memilih jenis laporan.');
				return;
			}
			
			//alert($('input[name^=participantName]').length);
			if ($('input[name^=participantName]').length <= 0 ){
				alert('Silahkan masukkan data peserta pelatihan.');
				return;
			}
			/*if ($('#participantTotal').val() <= 0){
				alert('Silahkan masukkan data absensi pelatihan.');
				return;
			}*/
			
			if ($('#attach1').val() == "" && $('#attach2').val() == "" && 
					$('#attach3').val() == "" && $('#attach4').val() == "" && $('#attach5').val() == ""){
				alert('Silahkan lampirkan file pendukung.');
				return;
			}
			
			//return;
			
			var status = "<?php if ($berkas!=NULL) echo $berkas->getInbox()->getCondition(); else echo "";?>";
			if (status=="NOK"){
				$('#myNote').modal('show');	
			} else {
				$('#editReportFrm').attr('action', "<?php echo base_url()?>inbox/saveAndSubmitReport").submit();	
			}	  		
	  	});
	  	
	  	$('#cancelBtn').click(function(){
	  		window.location = "<?php echo base_url()."inbox/profile/".$selectedProfile;?>";	
		});
	  	
	  	/*
	  	$('#saveNote').click(function(){
			var textNote = $('#note').val();
			$('#berkasNote').val(textNote);
			$('#myNote').modal('hide');
			$('#editReportFrm').attr('action', "<?php echo base_url()?>inbox/saveAndSubmitReport").submit(); */
	//	}); 
		
		
		$('#saveNote').click(function(){
			var textNote = $('#note').val();
			if (textNote==''){
				alert('Silahkan Tuliskan Komentar');
				return;
			} else {
				$('#berkasNote').val(textNote);
				$('#myNote').modal('hide');
				$('#editReportFrm').attr('action', "<?php echo base_url()?>inbox/saveAndSubmitReport").submit();
			}
		});
	  	
	  	$('#saveBtn').click(function(event){
			/*  validasi */
			event.preventDefault();
			/*if ($('#distrik').val() == "-1"){
				alert('District cannot be null...');
				return;
			}*/
			if ($('#perpus').val() == "-1"){
				alert('Silahkan memilih perpustakaan');
				return;
			}
			
			if ($('#perpus').val() == "-1"){
				alert('Silahkan memilih jenis laporan.');
				return;
			}
	  		$('#editReportFrm').submit();
	  	});
	  	
	  	 $('#distrik').on('change', function(e) {
		    // triggers when whole value changed
		    //alert('change');
		    	console.log("district value changed");
		    	var distrikId = $('#distrik').val();
		    	if (distrikId == "-1"){
		    		return;
		    	}
		    	// GET LIBRARY COMBOBOX
		    	$("#desa").empty();
				$("#desa").append($("<option></option>").attr("value", "-1").text("--Pilih Desa--")); 
		    	$.ajax({
				  url: "<?php echo base_url()?>/reference/desaByDistrik/"+distrikId,
				  success: function(data){
				  	 	/*if (data.error == 1){
				  			console.log("ERROR FETCHING DISTRIK");						
				  		} 				  		
				  	 	if (data.success == 1){
				  	 		
				  	 	} */
				  	 	
				  	 	$.each(data, function(key, val) {
							 $("#desa").append($("<option></option>")
							 .attr("value", val.value).text(val.nama));
						});
						$('#desa').trigger("liszt:updated");
				  },
				  dataType: "json"
				});
				// END GET LIBRARY COMBOBOX
		  });
		  
		  $('#desa').on('change', function(e) {
		    // triggers when whole value changed
		    //alert('change');
		    	console.log("desa value changed");
		    	var desaId = $('#desa').val();
		    	if (desaId == "-1"){
		    		return;
		    	}
		    	
		    	$("#perpus").empty();
		    	$("#perpus").append($("<option></option>").attr("value", "-1").text("--Pilih Perpustakaan--"));
		    	// GET LIBRARY COMBOBOX 
		    	$.ajax({
				  url: "<?php echo base_url()?>/reference/perpustakaanByDesa/"+desaId,
				  success: function(data){
				  	 	/*if (data.error == 1){
				  			console.log("ERROR FETCHING DISTRIK");						
				  		} 				  		
				  	 	if (data.success == 1){
				  	 		
				  	 	} */
				  	 	
				  	 	$.each(data, function(key, val) {
							 $("#perpus").append($("<option></option>")
							 .attr("value", val.value).text(val.nama));
						});
						$('#perpus').trigger("liszt:updated");
				  },
				  dataType: "json"
				});
				// END GET LIBRARY COMBOBOX
		  });
		  
		  $('#tipeBerkas').on('change', function(e) {
		    	console.log("district value changed");
		    	if ($(this).val() == "TRAINING"){
		    		$('#jenisTrainingGroup').show();
		    		$('#detailSection').show();	
		    		$('#memberOfTrainingPanel').show();
		    		$('#eventDateSection').hide();
		    		//$('#trainingDetailGroup').show();
		    		//$('#trainingDetailGroup2').show();
		    	} else {
		    		$('#jenisTrainingGroup').hide();
		    		$('#detailSection').hide();
		    		$('#memberOfTrainingPanel').hide();
		    		$('#eventDateSection').show();		    		
		    	}		   		 	
		  });	
		  
		  
	});
</script>
